<script>
import axios from "axios";
import * as echart from "echarts";

export default {
  data(){
    return{
      echartsData:[],
      index:1
    }
  },
  methods:{
    async getAllData() {
      await axios.post("/hkgapi/hydro/getAllRiverFromMysql").then(res => {
        this.echartsData = res.data
      })
    },
    render(index){

      //将每个河道的名字、信息单独变成列表
      var nameList=[]
      var lengthList=[]
      var averageWidthList=[]
      var waterAreaList=[]
      var waterVolumeList=[]
      for (let i = 0; i < this.echartsData.length; i++) {
        nameList.push(this.echartsData[i].name)
        lengthList.push(this.echartsData[i].length)
        averageWidthList.push(this.echartsData[i].averageWidth)
        waterAreaList.push(this.echartsData[i].waterArea)
        waterVolumeList.push(this.echartsData[i].waterVolume)
      }
      var renderList=[
        {name:'长度(km)',list:lengthList},
        {name:'平均宽度(m)',list:averageWidthList},
        {name:'水域面积(km²)',list:waterAreaList},
        {name:'水域容积(万m³)',list: waterVolumeList}]
      var lengthChart=echart.init(document.getElementById("echarts"))
      console.log(nameList)

      var option={
        title: {
          text: renderList[this.index-1].name
        },
        tooltip: {},
        xAxis: {
          data: nameList,
          axisLabel: {
            rotate: 45,  // 旋转标签，防止重叠
            fontSize: 12  // 调整字体大小
          }
        },
        yAxis: {},
        series: [
          {
            name: renderList[this.index-1].name,
            type: 'bar',
            data: renderList[this.index-1].list
          }
        ]
      }
      // 绘制图表
      lengthChart.setOption(option);
    },
    changeStatistic(index){
      this.index=index
    }
  },
  watch:{
    index(newValue,oldValue){
      this.render(newValue)
    }
  },
  async mounted() {
    await this.getAllData();
    this.render()
  }
}
</script>

<template>
<div>
  <el-row>
    <el-col span="3">
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          style="height: 89.8vh"
          active-text-color="#ffd04b">
        <el-menu-item @click="changeStatistic(1)" index="1" >
          <i class="el-icon-menu"></i>
          <span slot="title" >长度统计</span>
        </el-menu-item>
        <el-menu-item @click="changeStatistic(2)" index="2" >
          <i class="el-icon-menu"></i>
          <span slot="title" >平均宽度统计</span>
        </el-menu-item>
        <el-menu-item @click="changeStatistic(3)"  index="3"  >
          <i class="el-icon-menu"></i>
          <span slot="title">水域面积统计</span>
        </el-menu-item>
        <el-menu-item @click="changeStatistic(4)"  index="4"  >
          <i class="el-icon-menu"></i>
          <span slot="title">水域容积统计</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="21">
      <el-card shadow="always">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="echarts" style="width: 1280px;height:620px;"></div>

      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<style scoped>

</style>